<template>
  <div class="text-xs cursor-pointer w-180px h-full border-r border-gray-200 text-dark-50 bg-light-50 flex flex-col">
    <div class="between~ px-8px">
      <div class="item center~ box-border h-30px border-b-2px"
           :class="[subLeft === 'myCreated' ? 'text-blue-700 border-blue-700' : 'border-light-50']"
           @click="router.push('/myCreated')">
        我创建的
      </div>
      <div class="item center~ box-border h-30px border-b-2px"
           :class="[subLeft === 'myFollowed' ? 'text-blue-700 border-blue-700' : 'border-light-50']"
           @click="router.push('/myFollowed')">
        我关注的
      </div>
      <div class="item center~ box-border h-30px border-b-2px"
           :class="[subLeft === 'myJoined' ? 'text-blue-700 border-blue-700' : 'border-light-50']"
           @click="router.push('/myJoined')">我参与的
      </div>
    </div>
    <div class="flex-1 p-5px box-border">
      <div v-if="subLeft === ITEM_NAV.MY_CREATED">
        <slot name="myCreated"></slot>
      </div>
      <div v-if="subLeft === ITEM_NAV.MY_FOLLOWED">
        <slot name="myFollowed"></slot>
      </div>
      <div v-if="subLeft === ITEM_NAV.MY_JOINED">
        <slot name="myJoined"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {subLeft} from "@/router"
import {ITEM_NAV} from "../hooks"

const router = useRouter()
</script>

<style scoped>
.item {
  width: fit-content;
}
</style>